{include file="public/header"}
    <style scoped>
        .el-select-dropdown {
        padding: 0;
        }
    </style>
    {include file="public/style"}
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>
        <br>
        <el-card >
            <div style="display: flex;align-items: center;justify-content: flex-start;margin-bottom: 10px;">
                <el-form :inline="true" :model="searchForm" size="small"  ref="refsearchForm">                
                    <el-form-item label="订单号">
                        <el-input v-model="searchForm.orderid" placeholder="请输入订单号" clearable filterable></el-input>
                    </el-form-item>         
   
                    <el-form-item label="订单状态">
                        <el-select v-model="searchForm.status" placeholder="请选择订单状态" filterable clearable>
                            <el-option v-for="(item,index) in order_status" :key="index" :label="item" :value="index">
                            </el-option>
                        </el-select>
                    </el-form-item> 
                        <el-button type="primary"  size="small" icon="el-icon-search" plain @click="getSearch" v-cloak>查询</el-button>
                    </el-form-item>         
                      <el-button  type="primary"   @click="create" size="small"  icon="el-icon-edit" >批量合并订单</el-button>       
                   </el-form>   
            </div>

         
          <el-tabs v-model="activeName" type="border-card"   @tab-click="handleClick" >
            <el-tab-pane v-for="(item, index) in order_status" :key="index" :label="item"  :name="index">

                <el-table :data="tablelist"   style="width: 100%;margin-bottom: 20px;"  border     @selection-change="handleSelectionChange">
                    <el-table-column   type="selection"  width="55"> </el-table-column>
                    <el-table-column type="expand" :width="55">
                        <template v-slot="{row}">
                            <el-table :data="row.children" :show-header="false"> 
                                <el-table-column prop="goods_info" :width="100" align="center">
                                    <template v-slot="{row}">
                                        <div style="font-size: 13px;">
                                            <div>发货单号:{{row.d_id}}</div>                                           
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="img" :width="300" align="center">
                                    <template v-slot="{row}">
                                        <el-image style="width: 60px" :src="row.smallimage" alt="" />
                                    </template>
                                </el-table-column>                                  
                                <el-table-column prop="goods_info" :width="505" align="center">
                                    <template v-slot="{row}">
                                        <div style="font-size: 13px;">
                                            <div>sellersku：{{row.sellersku}}</div>
                                            <div>localsku：{{row.localsku}}</div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column :width="300" align="center">
                                    <template v-slot="{row}">
                                        <div>总价：{{row.amount || 0}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column :width="300" align="center">
                                    <template v-slot="{row}">
                                        <div>{{row.count || 0}} x{{row.unitprice || 0}}</div>
                                    </template>
                                </el-table-column>
                                <el-table-column :width="200" align="center">
                                    <template slot-scope="scope">
                                         发货方式：自发货
                                    </template>
                                </el-table-column>                                                   
                            </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column   prop="orderid" label="订单号" min-width="170" align="center"> </el-table-column>   
                    <el-table-column   prop="shops_name" label="店铺名称" min-width="130"> </el-table-column> 
                    <el-table-column   prop="status"  label="订单状态" min-width="100" align="center"> </el-table-column>                        
                    <el-table-column   prop="status"  label="订单金额"  min-width="120" align="center"> 
                        <template v-slot="{row}">
                              ({{row.code}})  {{row.amount}}
                        </template>                        
                    </el-table-column>  
                      <el-table-column   prop="storage_name"  label="仓库"  min-width="100"  align="center"> </el-table-column>  
                    <el-table-column   prop="count"  label="发货件数"  min-width="100"  align="center"> </el-table-column>  
                    <el-table-column   prop="countrysCN"  label="国家" min-width="120"align="center" > </el-table-column> 
                    <el-table-column   prop="logistice_name"  label="快递渠道"  min-width="100"  align="center"> </el-table-column>  
                    <el-table-column   prop="trackingno"  label="运单号" min-width="150"align="center" >
                        <template v-slot="{row}">
                            <el-link :underline="false" type="primary" :href="'http://www.17track.net/zh-cn/track?nums='+row.trackingno" target="_blank">{{row.trackingno}}</el-link>
                        </template>
                    </el-table-column> 
                    
                    <el-table-column   prop="ordertime"  label="下单时间"  min-width="180" align="center"> </el-table-column>                  
                    <el-table-column   prop="weighttime"  label="发货时间"   min-width="180" align="center"> </el-table-column> 
                    <el-table-column   prop="lastestShiptime"  label="最晚发货时间"   width="180"  align="center"> </el-table-column> 
                    <el-table-column   prop="status"  label="备注"  width="250" > 	
                        <template v-slot="{row}">
                            <el-input v-model="row.notes" size="small"  placeholder="请填写批注"  @blur="confirm(row)"></el-input>
                        </template>
                    </el-table-column> 
                    <el-table-column  fixed="right" label="操作" width="300">
                        <template v-slot="{row}">
                            <el-button type="primary"  plain icon="el-icon-edit" @click="editor(row)" >申请退回 </el-button>        
                            <el-button type="success"  plain   icon="el-icon-view"  @click="dateil(row)" >查看详情 </el-button>        
                            <!-- <el-button type="danger"  plain icon="el-icon-delete"    @click="cancel(row.id)">取消订单</el-button>              -->
                        </template>
                    </el-table-column>
                </el-table>
                <!-- page -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pagenum" :page-sizes="[20,50,100, 150, 300,500,1000,2000]"
                    :page-size="searchForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>  
            </el-tab-pane>
            </el-tabs>
        </el-card>
        
        <!-- 修改编辑弹窗 -->
        <el-dialog :title="title" :visible.sync="ismenudialogVisible " width="600px" :close-on-click-modal="false">
            <el-form :inline="true" :model="createForm" size="mini"  :rules="isMenurules"  ref="refsearchForm"  :popper-append-to-body="false"  >              
               
                <el-form-item label-width="110px" prop="title" label="权限组名称" label-position="left">
                    <el-input v-model="createForm.title" placeholder="请输入权限组名称" style="width: 370px;"
                            clearable></el-input>
                </el-form-item>
                <el-form-item label-width="110px"  label="权限组状态" label-position="left">
                    <template   >                       
                        <el-radio-group v-model="createForm.status" style="margin-left: 10px;">
                            <el-radio :label="1" border>正常</el-radio>
                            <el-radio :label="0" border>关闭</el-radio>
                    </el-radio-group> 
                    </template>
                </el-form-item>      
                <div>                   
                    <el-form-item>
                        <el-button type="primary" @click="checkSubmits">确认</el-button>
                        <el-button type="primary" plain @click="close"> 取消</el-button>
                    </el-form-item>  
                </div>                 
            </el-form>
        </el-dialog>

            
    </div>

        <script>
            new Vue({
                el: '#app',
                data: function () {
                    return {  
                        order_status:{$status|raw},// 状态是否正常              
                        activeName: '1', //当前激活的选项卡
                        total:0,   //分页总页数      
                        tablelist:[],              
                        searchForm: {
                            title: '',
                            status: '1',
                            pagenum: 1,
                            pagesize: 20,              
                        
                        },
                        editForm:{
                            status:'',
                            id:''
                        },
                        menu:[],
                        createForm:{
                            status:1,                
                            title:'',            
                        },
                        ismenudialogVisible: false, 
                        title:'',
                        isMenurules:{
                            title: [
                                { required: true, message: '请输入权限组名称', trigger: 'blur' }
                            ],
                            sort: [
                                { required: true, message: '请输入排序权重', trigger: 'blur' }
                            ],
                        }             
                        
                    }
                },
                mounted(){
                    this.getSearch()
                },
                methods: {        

                    async getDatalist() {
                       let loading = this.$loading({
                            lock: true,
                            text: '数据加载中···',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        const res = await axios.post('/admin/order/index', {params: this.searchForm})
                        loading.close()
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }
                        this.total = res.info.total
                        this.tablelist = res.info.list
                    },

                    //编辑
                    editor(row){         
                        this.title = '编辑权限组'
                        this.ismenudialogVisible = true
                        this.$set(this.createForm,'id',row.id);
                        this.$set(this.createForm,'title',row.title);    
                        this.$set(this.createForm,'status',row.status);                        
                    },
                    //添加权限
                    create(){
                        this.title = '添加权限组'
                        this.ismenudialogVisible = true
                        this.createForm.id = ''
                        this.createForm.status = 1         
                        this.createForm.title = ''        
                    },        
                    handleSizeChange(newSize) {
                        this.searchForm.pagesize = newSize
                        this.getDatalist()
                    },
                    handleCurrentChange(newPage) {
                        this.searchForm.pagenum = newPage
                        this.getDatalist()
                    },
                    handleSelectionChange(val) {
                        this.multipleSelection = val;
                    },
                    handleClick(tab, event) {
                        console.log(tab.name);
                        this.searchForm.status=tab.name
                        this.getDatalist();
                    }, 
                
                    getSearch() {
                        this.searchForm.pagenum = 1
                        this.getDatalist()
                    },
                    //修改批注
                     async confirm(row) {
                           axios.post('/admin/order/confirmnotes', {params: {id:row.id,notes:row.notes}}).then(res => {                               
                                if (res.status !== 1) {
                                    return this.$message.error(res.info);                  
                                }                            
                                this.$message.success('操作成功');                               
                                this.getDatalist()
                            }).catch(err => {
                                console.log(err)
                            }) 
                     },
                    //确认提交修改
                    async checkSubmits(){
                        this.$refs.refsearchForm.validate(async valid => {
                            if (!valid) return;
                            let loading = this.$loading({
                                lock: true,
                                text: '数据加载中···',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                                });
                            axios.post('/admin/authgroups/create', {params: this.createForm}).then(res => {
                                loading.close()
                                if (res.status !== 1) {
                                    return this.$message.error(res.info);                  
                                }
                            
                                this.$message.success('操作成功');
                                this.ismenudialogVisible = false
                                this.getDatalist()
                            }).catch(err => {
                                console.log(err)
                            })
                        })
                    },
                    //删除
                    cancel($id){
                        this.$confirm('确认需要删除？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            closeOnClickModal: false, // 禁用点击遮罩关闭弹窗
                            type: 'warning'
                        }).then(() => {
                            axios.post('/admin/authgroups/delete', {params: {id: $id}}).then(res => {
                                if (res.status !== 1) {
                                    return this.$message.error(res.info);             
                                }                    
                                this.$message.success('删除成功');
                                this.getDatalist()
                            }).catch(err => {
                                console.log(err)
                            })
                        }).catch(() => {
                            this.$message.info('已取消');
                        });
                    },
                    //关闭弹窗
                    close(){
                        this.ismenudialogVisible=false  
                    },     
                    //查看详情
                    dateil(row){
                        window.location.href = "/admin/order/dateil?orderid="+row.orderid
                    }
                }
            })
        </script>
    </body> 
</html>
